<template>
  <div id="LoginCard">
    <el-card shadow="hover" header="注册" >
      <el-form ref="formRef" :model="myData" label-width="120px" label-position="left">
        <el-form-item label="昵称">
          <el-input v-model="myData.nickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="myData.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="myData.verificationCode"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="myData.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="myData.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="myData.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">Create</el-button>
          <el-button>Cancel</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reactive } from "vue";

export default {
  name: "Login",
  setup() {
    var myData = reactive({
      nickname: "",
      phoneNumber: "",
      verificationCode: "",
      gender: "",
      password: "",
      rePassword: "",
    });

    return { myData };
  },
  data() {
    return {

    };
  },
  methods: {
    onSubmit() {
      var a = this.myData;
      console.log(a.type);
    },
  },
};
</script>

<style scoped>
#LoginCard {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

